<template>
    <div style="border: green solid 1px">
        <h2>我是自定义的组件</h2>
        <p>父组件给我的 v-model: {{ value }}</p>
        <p>父组件给我的message: {{ message }}</p>
        <button v-on:click="changeMessage">尝试反向修改父组件的值</button>
        <p>父组件给我的number: {{ number }}</p>

        <p>我的messageCopy: {{ messageCopy }}</p>
        <p>我的numberCopy: {{ numberCopy }}</p>
        <p>我的configCopy: {{ configCopy }}</p>
        <button v-on:click="changeConfig">尝试反向修改父组件传入的对象</button>
        <button v-on:click="sendMessageToMain">emit消息给父组件</button>
        <button v-on:click="sendMessageToMainByVModel">通过v-model返回消息给父组件</button>
    </div>
</template>
<script>
    export default {
        props: {
            /**
             * v-model相关
             */
            value: {
                type: String
            },
            message: {
                /**
                 * 使用了数据验证的形式
                 * 支持：
                 * String
                 * Number
                 * Boolean
                 * Object
                 * Array
                 * Function
                 */
                type: String,
                default() {
                    return "";
                }
            },
            number: {
                /**
                 * 使用了数据验证的形式
                 */
                type: Number,
                validator: function (value) {
                    return value >= 0;
                }
            },
            config: {
                /**
                 * 使用了数据验证的形式
                 */
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data () {
            return {
                /**
                 * Vue2不允许直接修改传入的props参数，所以可以把props的值赋值给子组件的属性
                 * 这样子组件的属性可以在自己的作用域下随意使用和修改
                 */
                messageCopy: this.message,
                numberCopy: this.number,
                configCopy: this.config
            }
        },
        /**
         * 计算属性
         */
        computed: {

        },
        methods: {
            changeMessage() {
                /**
                 * 会引发这个错误
                 * Avoid mutating a prop directly since the value will be overwritten
                 * whenever the parent component re-renders. Instead,
                 * use a data or computed property based on the prop's value.
                 * Prop being mutated: "message"
                 * @type {string}
                 */
                window.alert("打开console控制台，会出现Avoid mutating a prop directly since the value will be overwritten ...错误")
                this.message = "我是子组件修改的值";
            },
            changeConfig() {
                /**
                 * 这种方式可以成功修改父组件传入的对象的属性值，因为对象是传引用的
                 * @type {string}
                 */
                window.alert("成功修改了父组件传入的对象，父组件的值发生了改变");
                this.configCopy.price = "10000";
            },
            sendMessageToMain() {
                this.$emit("handle-completed", "我的是子组件的消息");
            },
            /**
             * 一个具有双向绑定的v-model组件要满足下面两个要求
             * 1. 接收一个value属性
             * 2. 生成新value时，触发input事件
             */
            sendMessageToMainByVModel() {
                this.$emit("input", "我的是子组件的v-model消息");
            }
        }
    }
</script>
<style scoped>

</style>